<template>
    <el-row style="margin-top:10px;">
        <el-col :span="3"><div class="grid-content"></div></el-col>
        <el-col :span="18">
            <div class="grid-content" style="min-height:500px;">
              <!-- 数据表格显示区域 -->
              <template>
              <el-table :data="tableData" border 
                v-loading="loading"
                element-loading-text="数据正在加载中……"
                style="width: 100%">
                <el-table-column fixed prop="plan" label="财务计划名称" width="250"></el-table-column>
                <el-table-column fixed prop="cycle" label="周期" width="80"></el-table-column>
                <el-table-column fixed prop="cycle_unit" label="周期单位" width="100"></el-table-column>

                <el-table-column prop="start_date" label="实施起始日期" width="150"></el-table-column>
                <el-table-column prop="end_date" label="实施结束日期" width="150"></el-table-column>
                <el-table-column prop="standard_money" label="财务计划标准(￥)" width="100"></el-table-column>
                <el-table-column prop="end_mk" label="是否结束" width="100"></el-table-column>
                <el-table-column prop="user_name" label="编辑者" width="180"></el-table-column>
                <el-table-column prop="mtime" label="编辑时间" width="180"></el-table-column>

                <el-table-column fixed="right" label="操作" width="150">
                  <template scope="scope">
                    <el-button @click="viewHandler(scope.$index, scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="EditHandler(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="DelHandler(scope.$index, scope.row, tableData)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>              
              </template>
              <template v-if="tb_pagerMk">
                <div class="block">
                  <el-pagination
                    @current-change="handleCurrentChange"
                    :page-size="30"
                    :current-page="tb_pager.page"
                    layout="total, prev, pager, next, jumper"
                    :total="tb_pager.count">
                  </el-pagination>
                </div>
              </template>
            </div>
        </el-col>
        <el-col :span="3"><div class="grid-content"></div></el-col>
    </el-row>    
</template>

<script>
  import Main from './main.js'
  export default {
    methods: {
      // 查看
      viewHandler(idx, row) {
        location.href = '#/view/'+row['plan_no'];
      },
      // 编辑
      EditHandler(idx, row){
        location.href = '#/edit/'+row['plan_no'];
      },
      // 删除数据
      DelHandler(idx, row, $tb){
        // this.$confirm - Promise 解析 then 函数式内发生错误时自动 catch
        // vue 解析无效  
        this.$confirm('您确定要删除当前选中的财务计划？', '提示', 
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.$c.PigeonsPost('finance/plan/del',
              {no: row['plan_no']},
              (result)=>{
                  $tb.splice(idx, 1);
                  this.$message({
                      showClose: true,
                      message: result.msg,
                      type: 'success'
                  });
              },
              (error, httpMK)=>{
                console.log(error);
                  this.$message({
                      showClose: true,
                      message: error,
                      type: 'error'
                  });
              }
            );
          })
          .catch((t) => {
            console.log(t);
          });
      },
      // 换页处理
      handleCurrentChange(val){
        Main.tableLoad(this,val)
      }
    },

    data() {
      return {        
        tableData: [],
        // loading: true,
        loading: false,
        tb_pagerMk: false,
        tb_pager: {count:0,page:1}
      }
    },

    created () {
      Main.tableLoad(this)
    }
  }
</script>